<template>
  <div :class="{ 'custom-tree-node-show': !isShow }" class="custom-tree-node-container">
    <div class="custom-tree-node-title">图层目录</div>
    <el-tree
      ref="treeRef"
      style="max-width: 600px"
      :data="arr"
      show-checkbox
      default-expand-all
      node-key="LayerIndex"
      :props="defaultProps"
      :default-checked-keys="[100, 101, 102, 0, 1, 2, 3, 4]"
      @check="change"
    >
      <template #default="{ node, data }">
        <i :class="['iconfont', data.icon]"></i>
        <span>{{ node.label }}</span>
      </template>
    </el-tree>
    <div class="icon" @click="isShow = !isShow">
      <i v-show="isShow" class="iconfont icon-shuangzuojiantou-"></i>
      <i v-show="!isShow" class="iconfont icon-shuangyoujiantou-"></i>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { storeToRefs } from 'pinia';
import { useMap } from '@/stores/useMap.js';

// 获取store
const { ggMap } = storeToRefs(useMap());

const isShow = ref(false);
const treeRef = ref(null);
const defaultProps = ref({
  label: 'label', // 告诉 el-tree 每个节点的显示文本是数据对象中的 label 属性
  children: 'children', // 指定子节点数组的属性名称为 children,如果一个节点的数据对象中有 children 属性，el-tree 会将其渲染为该节点的子节点
});

// 创建响应式的 arr
const arr = ref([
  {
    label: '地图文档',
    LayerIndex: 100,
    icon: 'icon-tubiaozhizuomoban_canbaorenshenfenleibie_ditu',
    children: [
      {
        label: '光谷智慧交通',
        LayerIndex: 101,
        icon: 'icon-tubiaozhizuomoban_canbaorenshenfenleibie_ditu',
        children: [
          {
            label: '新地图1',
            LayerIndex: 102,
            icon: 'icon-ditu',
            children: [],
          },
        ],
      },
    ],
  },
]);

// 创建响应式的 childrenLayers
const childrenLayers = ref([]);
let length = ref(8);

const change = (data, checked) => {
  // console.log(data);
  if (checked.checkedKeys.length > 0) {
    if (checked.checkedKeys.length === 8) {
      ggMap.value.setLayerStatus('0,1,2,3,4', 'include');
    } else {
      // 如果选中节点的数量少于 length.value（上一次选中节点的数量），将当前图层状态设为 exclude。
      // 否则，将图层状态设为 include。
      const layerStatus = checked.checkedKeys.length < length.value ? 'exclude' : 'include';
      ggMap.value.setLayerStatus(data.LayerIndex, layerStatus);
      ggMap.value.refresh();
    }
  } else {
    ggMap.value.setLayerStatus('0,1,2,3,4', 'exclude');
  }

  length.value = checked.checkedKeys.length;
};

nextTick(() => {
  // 实例化Zondy.Service.Catalog.MapDoc类，设置操作的地图文档为用户指定的地图文档,地图为索引值为0的地图
  var docCatalog = new Zondy.Catalog.MapDoc({
    ip: 'localhost',
    port: '8089',
    docName: 'guanggu',
    mapIndex: 0,
  });
  // 调用getLayerInfo函数，获取地图图层相关信息，在回调函数中处理结果
  docCatalog.getLayersInfo(getListSuccess);

  const handleData = (name, LayerIndex, icon) => {
    let obj = {};
    obj.label = name;
    obj.LayerIndex = LayerIndex;
    obj.icon = icon;
    childrenLayers.value.push(obj);
  };

  function getListSuccess(data) {
    if (data.succeed) {
      if (data == null) {
        alert('没有获取到矢量地图文档！');
        return;
      } else {
        // console.log(data);
        data.value.forEach(layer => {
          if (layer.GeomType == 'Reg') {
            const icon = 'icon-mian';
            handleData(layer.Name, layer.LayerIndex, icon);
          } else if (layer.GeomType == 'Lin') {
            const icon = 'icon-xian';
            handleData(layer.Name, layer.LayerIndex, icon);
          } else if (layer.GeomType == 'Pnt') {
            const icon = 'icon-sandian';
            handleData(layer.Name, layer.LayerIndex, icon);
          }
        });
        // 更新 arr.value 的树结构
        arr.value[0].children[0].children[0].children = childrenLayers.value;

        // 确保在更新后重新设置默认选中项
        nextTick(() => {
          treeRef.value.setCheckedKeys([100, 101, 102]);
        });
      }
    } else {
      alert('获取到矢量地图文档失败！');
      return;
    }
  }
});
</script>

<style lang="scss" scoped>
.custom-tree-node-container {
  position: fixed;
  top: 65px;
  z-index: 1;
  width: 210px;
  height: 80%;
  background-color: rgba(252, 252, 250, 0.8);
  transition: all 0.5s ease-in-out;
  .custom-tree-node-title {
    width: 100%;
    height: 50px;
    background-color: #2096f0;
    padding-left: 10px;
    border-radius: 0 15px 0 0;
    line-height: 50px;
    font-size: large;
    color: #fff;
    cursor: pointer;
  }
  .el-tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(252, 252, 250, 0.1);
    .iconfont {
      color: rgb(64, 158, 255);
    }
  }
  .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .icon {
    position: absolute;
    right: 0;
    background: rgba(204, 204, 204);
    border-radius: 5px 0 0 5px;
    width: 20px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    .iconfont.icon-shuangyoujiantou- {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      background: rgba(204, 204, 204);
      transition: all 0.5s ease-in-out;
    }
  }
}

.custom-tree-node-show {
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
}
</style>
